/**
* @file
* @author renzhiqiang
* @date 2017-04-13
*/
<template>
  <div>
    <header id="header" class="mui-bar mui-bar-nav" style="position: fixed;">
      <!--<a class="mui-icon mui-icon-left-nav mui-pull-left" @tap="goBack"></a>-->
      <h1 class="mui-title">{{language.EditProfile}}</h1>
    </header>
    <div class="mui-content bgGrep" style="padding-top: 56px;">
      <ul class="mui-table-view">
        <li class="mui-table-view-cell listSingle" @click='selectFile()'>
          <a class="mui-navigate-right">
            <span style="width: 72%;">
              <span style="line-height: 60px;width: 100%" class="mui-icon"><label class="iconmg">{{language.ProfilePhoto}} <label class="translate">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</label></label></span>
            </span>
            <div id='file'>
              <span id='result'>
                   <span  v-if="editData.url === ''" class='deflautImg'></span>
                   <img id='imgs' v-else src={{editData.url}} >
              </span>
            </div>
          </a>
        </li>
        <li class="mui-table-view-cell listSingle">
          <a class="mui-navigate-right">
            <span>
              <span class="mui-icon"><label class="iconmg">{{language.Nickname}}</label></span>
	    	    </span>
            <input type="text" v-model="editData.nickName" placeholder="">
          </a>
        </li>
        <li class="mui-table-view-cell listSingle" @tap='seletTime()'>
          <a class="mui-navigate-right">
            <span>
              <span class="mui-icon"><label class="iconmg">{{language.Birthday}}</label></span>
	    	    </span>
            <div v-text="editData.birthday"></div>
          </a>
        </li>
        <li class="mui-table-view-cell listSingle" @tap='seletNumber()'>
          <a class="mui-navigate-right">
            <span>
              <span class="mui-icon"><label class="iconmg">{{language.PhoneNumber}}</label></span>
            </span>
            <div v-text="editData.phone"></div>
          </a>
        </li>
        <li class="mui-table-view-cell listSingle" @tap='seletEmail()'>
          <a class="mui-navigate-right">
            <span>
              <span class="mui-icon"><label class="iconmg">{{language.Email}}</label></span>
            </span>
            <div v-text="editData.email"></div>
          </a>
        </li>
      </ul>
      <ul class="mui-table-view" style="margin-top: 20px;">
        <li class="mui-table-view-cell listSingle mui-collapse">
          <a class="mui-navigate-right"><span><span class="mui-icon"><label class="iconmg">{{language.ResetPassword}}</label></span></span></a>
          <div class="mui-collapse-content">
            <ul class="mui-table-view">
              <li class="mui-table-view-cell listSingle ml16 mt16">
                <a class="mui-navigate-right">
                  <!--<span>-->
                    <!--<span class="mui-icon"><label class="iconmg passWord">{{language.oldPass}}</label></span>-->
                  <!--</span>-->
                  <input type="password" class="passWordinput" v-model="editData.oldPass" v-bind:placeholder="language.oldPass">
                </a>
              </li>
              <li class="mui-table-view-cell listSingle ml16 ">
                <a class="mui-navigate-right">
                    <!--<span>-->
                      <!--<span class="mui-icon"><label class="iconmg passWord">{{language.NewPass}}</label></span>-->
                    <!--</span>-->
                  <input type="password" class="passWordinput" v-model="editData.NewPass" v-bind:placeholder="language.NewPass">
                </a>
              </li>
              <li class="mui-table-view-cell listSingle ml16">
                <a class="mui-navigate-right">
                    <!--<span>-->
                      <!--<span class="mui-icon"><label class="iconmg passWord">{{language.NewPassAg}}</label></span>-->
                    <!--</span>-->
                  <input type="password" class="passWordinput" v-model="editData.NewPassAg" v-bind:placeholder="language.NewPassAg">
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
      <button type="button" class="mui-btn mui-btn-SingIn" @tap="saveFn()">{{language.Save}}</button>
    </div>
    <div class="capture" v-show="isShow">
        <div id='capture'></div>
        <div class="bottom">
          <div class="left" @tap='Cancel'>{{language.Cancel}}</div>
          <div class="right" @tap='Done'>{{language.Done}}</div>
        </div>
      </div>
  </div>
</template>
<style lang="less" rel="stylesheet/less">
  @import './../../public/css/mui.picker.min.css';
  @import './../cropper.min.css';
</style>
<script>
  import store from '../login-store';
  import {tools} from 'tools';
  var $ = require('jquery');
  var lan = require('./../language.json');
  require('cropper');
  import {FastClick} from 'fastclick';
  export default {
    components: {},
    data: function () {    // 组件的数据格式
      return {
        currentHeader: {
          title: 'Edit Profile'
        },
        editData: {
          url: '',
          phone: '',
          nickName: '',
          birthday: '',
          id: '',
          email: '',
          oldPass: '',
          NewPass: '',
          NewPassAg: ''
        },
        imgData: '',
        language: lan[window.lan] || lan['en'],
        isShow: false,
        r: ''
      };
    },
    methods: {
      seletTime: function () {
        var self = this;
        var picker = new mui.DtPicker({
           buttons: [
             self.language['Cancel'],
             self.language['Save']
           ],
           labels: [
             self.language['Day'],
             self.language['Month'],
             self.language['Year']
           ],
          'value': '',
          'beginYear': '1916',
//          'endYear': new Date().getFullYear(),
//          'endMonth': new Date().getMonth(),
          'endDate': new Date(),
          'type': 'date'
        });
        picker.show((rs) => {
          self.editData.birthday = rs.text;
          picker.dispose();
        });
      },
      seletNumber: function () {
        this.$router.go('/phoneNumber?r=' + this.r);
      },
      seletEmail: function () {
        this.$router.go('/email?r=' + this.r);
      },
      selectFile: function () {
        console.info('11');
        if (document.getElementById('camera')) {
          document.getElementById('camera').remove();
        };
        var self = this;
        var $input = document.createElement('input');
        $input.style.display = 'none';
        $input.setAttribute('id', 'camera');
        $input.setAttribute('name', 'file');
        $input.setAttribute('type', 'file');
        $input.setAttribute('accept', 'image/*');
//        $input.setAttribute('accept', 'image/*');
        document.body.appendChild($input);
        $input.addEventListener('change', function () {
          tools.show('图片解析中...');
          self.isShow = true;
          var file = $input.files[0];
            if (file) {
            var reader = new FileReader();
            reader.onload = function (event) {
              var txt = event.target.result;
              var img = document.createElement('img');
              img.src = txt;
              document.getElementById('capture').innerHTML = '';
              document.getElementById('capture').appendChild(img);
              var $image = $('#capture > img');
              $image.cropper({
                aspectRatio: 1,
                viewMode: 1,
                ready: function () {}
              });
              tools.hide();
            };
          };
          reader.readAsDataURL(file);
        });
        setTimeout(function () {
         console.info('111');
          $input.click();
        }, 100);
      },
      seletReset: function () {
        this.$router.go('/register/idEite?r=' + this.r);
      },
      Done: function () {
        var [$image, croppedCanvas, self] = [$('#capture > img'), '', this];
        croppedCanvas = $image.cropper('getCroppedCanvas', {width: 320, height: 320});
        var blob = encodeURIComponent(croppedCanvas.toDataURL('image/png'));
        var formData = new FormData();
        formData.append('file', blob);
        tools.show(this.language.load);
        $.ajax(tools.getHostFn() + 'usercenter/open/phone/uploadAvatar', {
          method: 'POST',
          data: formData,
          processData: false,
          contentType: false,
          success: function (data) {
            tools.hide();
            var datas = JSON.parse(data);
            var url = datas.result;
            $('#imgs').attr('src', url);
            self.editData.url = url;
          },
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            tools.hide();
            tools.msgShow('undefined.');
          }
        });
        this.isShow = false;
      },
      Cancel: function () {
//        this.selectFile();
        this.isShow = false;
      },
      saveFn: function () {
        var self = this;
        store.saveFn(this.editData, this.r, function () {
          self.$router.go('/registerSuccues/edit');
        });
      }
    },
    //  created 钩子在实例创建后,在reday之前调用
    created: function () {
      if (document.querySelector('head title')) {
        document.querySelector('head title').textContent = this.language.SIWTA;
      }
    },
    route: {
      data: function (data) {
        console.info('详情');
        var self = this;
        store.state.detailR = self.r = tools.getQueryString('r') || store.state.detailR;
        store.getUserInfo(self.r, value => {
          if (data.from.path && (data.from.path.match('/phoneNumber') || data.from.path.match('/email') || data.from.path.match('/register/idEite') || data.from.path.match('/resetSuccues'))) {
            self.editData.phone = value.phone;
            self.editData.email = value.email;
          } else {
            self.editData = {
              url: value.avatar || '',
              phone: value.phone,
              nickName: value.nickName,
              birthday: tools.dateFn(String(value.birthday || 0)),
              email: value.email || '',
              oldPass: '',
              NewPass: '',
              NewPassAg: ''
            };
          }
//          $('#imgs').attr('src', value.avatar || '');
//          self.editData.birthday = tools.dateFn(String(self.editData.birthday || 0));
        });
      }
    },
    ready: function () {
      mui('.mui-scroll-wrapper').scroll();
      FastClick.attach(document.body);
    }
  };
</script>
